import React ,{PropTypes} from 'react';
import {FormGroup, FormControl} from 'react-bootstrap';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { Router, Route, Link, browserHistory } from 'react-router'

const style = {
  margin: 12,
  position: 'relative',
  right: '54px',
};

const listSylte = {
    textAlign: "center",
    margin: "0 auto",
    left: 0,
    right: 0,
    position: "relative",
    marginTop: "18%"
}

class Search extends React.Component {

  constructor(props) {
    super(props);
  }

  handleSubmit(e) {
    e.preventDefault();
    const { content } = this.refs;
    const data = {
      content: content.input.value,
    };
    fetch('http://localhost:8088/crawl/search', {
      method: 'post',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: `email=${email}&password=${password}&username=${username}&sid=${sid}`
    })
    .then((response) => {
      if (response.code == 501) {
        throw new Error(response.statusText);
      }
      return response.text();
    })
    .then((info) => {
        console.log(JSON.parse(info).info);
        if(JSON.parse(info).info.code != 501) {
          dispatch(registerSuccess());
          Storage.set('token', JSON.stringify(formData))
        } else {
          dispatch(registerError(JSON.parse(info).info.codeMessage));
        }
    })
    .catch((err) => {
      dispatch(registerError(err));
    });
  }

  render() {
    const {showSearch} = this.props;

    return (
      <MuiThemeProvider>
        <div className = {'search-content'}>
            <div className = 'container'>
              <form onSubmit = {this.handleSubmit.bind(this)} ref = 'content'>
                <FormControl type="text" placeholder="Search" />
                <RaisedButton label= {"Search"} primary={true} style={style} className={'btn-search'}
                  name = 'content'
                  type = 'submit'
                />
              </form>
            </div>
            <div style={listSylte}>
                 <FlatButton label="Default" />
                 <FlatButton label="Default" />
                 <FlatButton label="Default" />
                 <FlatButton label="Default" />
                 <FlatButton label="Default" />
                 <FlatButton label="Default" />
            </div>
         </div>
      </MuiThemeProvider>
    )
  }
}

Search.contextTypes = {
  router: React.PropTypes.func.isRequired
}

export default Search;